
<template>
  <el-row>
    <el-col :span="4">
      <el-button type="primary" @click="doSetView()">setView</el-button>
    </el-col>
    <el-col :span="6">
      <el-button type="success" @click="doFlyTo1()">flyTo1</el-button>
      <el-button type="success" @click="doFlyTo2()">flyTo2</el-button>
      <el-button type="success" @click="doFlyTo3()">flyTo3</el-button>
      <el-button type="success" @click="doFlyTo4()">flyTo4</el-button>
    </el-col>
    <el-col :span="8">
      <el-button type="warning" @click="doLootAt1()">doLootAt1</el-button>
      <el-button type="warning" @click="doLootAt2()">doLootAt2</el-button>
      <el-button type="warning" @click="doLootAt3()">绕点飞行</el-button>
    </el-col>
  </el-row>

  <el-row>
    <el-col :span="24" style="height: 80vh">
      <CesiumMap ref="cesiumMap"></CesiumMap>
    </el-col>
  </el-row>
</template>
    
<script>
import CesiumMap from "../cesiumMap/index.vue";
import * as Cesium from "cesium";
import { ref, onMounted } from "vue";
const cesiumMap = ref(null);
let viewer = ref(null);
export default {
  components: { CesiumMap },
  methods: {
    doTianditu: function () {
      // let viewer = cesiumMap.value.viewer;
      console.log(viewer.imageryLayers);
      let TOKEN_TIANDITU = "39c6ffb6b4ceb22a0dfad5975f58a495";
      viewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=39c6ffb6b4ceb22a0dfad5975f58a495",
          layer: "tdtBasicLayer",
          style: "default",
          format: "image/jpeg",
          tileMatrixSetID: "GoogleMapsCompatible",
          maximumLevel: 18,
        })
      );

      viewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url:
            "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=" +
            TOKEN_TIANDITU,
          layer: "tdtAnnoLayer",
          style: "default",
          format: "image/jpeg",
          tileMatrixSetID: "GoogleMapsCompatible",
          show: true,
        })
      );
    },
    doFlyTo1: function () {
      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(120.2, 30.3, 70000.0),
      });
    },
    doFlyTo2: function () {
      viewer.camera.flyTo({
        destination: Cesium.Rectangle.fromDegrees(120, 30, 120.5, 30.5),
      });
    },
    doFlyTo3: function () {
      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(120.2, 30.3, 70000.0),
        orientation: {
          direction: new Cesium.Cartesian3(90, 0, 0),
          up: new Cesium.Cartesian3(90, 0, 0),
        },
      });
    },
    doFlyTo4: function () {
      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(120.2, 30.3, 70000.0),
        orientation: {
          heading: Cesium.Math.toRadians(-40),
          pitch: Cesium.Math.toRadians(-90),
          roll: Cesium.Math.toRadians(-20),
        },
      });
    },
    doLootAt1: function () {
      viewer.camera.lookAt(
        Cesium.Cartesian3.fromDegrees(120.2, 30.3, 70000.0),
        new Cesium.Cartesian3(0.0, -4790000.0, 3930000.0)
      );


    },
    doLootAt2: function () {
      var heading = Cesium.Math.toRadians(0.0); //航向角（弧度）。 航向是从局部北向旋转，其中正角向东增加。
      var pitch = Cesium.Math.toRadians(-40.0); //俯仰角（弧度）。间距是从局部xy平面旋转的角度。正俯仰角在飞机上方。负俯仰角在平面下方。
      var range = 100.0; //距中心的距离，以米为单位。

      viewer.camera.lookAt(
        Cesium.Cartesian3.fromDegrees(120.2, 30.3, 70000.0),
        new Cesium.HeadingPitchRange(heading, pitch, range)
      );
    },
    doLootAt3: function () {
      const center = Cesium.Cartesian3.fromDegrees(120.2, 30.3);
      let heading = Cesium.Math.toRadians(50.0);
      const pitch = Cesium.Math.toRadians(-20.0);
      const range = 5000.0;
      let x = 50;
      viewer.scene.preUpdate.addEventListener(function () {
        x += 0.05;
        heading = Cesium.Math.toRadians(x);
        viewer.camera.lookAt(
          center,
          new Cesium.HeadingPitchRange(heading, pitch, range)
        );
      });
    },
    doSetView: function () {
      // let viewer = cesiumMap.value.viewer;
      var homeCameraView = {
        longitude: 113.19852477692594,
        latitude: 21.987987831067873,
        // height: 407.3694675811462,
        height: 10000,
        heading: 0.7212008920375688,
        pitch: -0.9589929846556138,
        roll: 0.00268109081661283,
      };
      viewer.camera.setView({
        // fromDegrees()方法，将经纬度和高程转换为世界坐标
        destination: Cesium.Cartesian3.fromDegrees(
          homeCameraView.longitude,
          homeCameraView.latitude,
          homeCameraView.height
        ),
        orientation: {
          // 方向
          heading: homeCameraView.heading,
          // 视角
          pitch: homeCameraView.pitch,
          // 倾斜角度
          roll: homeCameraView.roll,
        },
      });
    },
  },
  setup() {
    return {
      cesiumMap,
    };
  },
  mounted() {
    viewer = cesiumMap.value.viewer;
    viewer.imageryLayers.removeAll();
    this.doTianditu();
  },
};
</script>
  
<style scoped></style>
  